<template>
  <div>
    <div style="display: flex; grid-gap: 20px; padding: 15px 0; border-bottom: 1px solid #cccccc" v-for="item in data.playlistData" v-if="data.playlistData.length">
      <img :src="item.playlist.img" alt="" style="width: 140px; height: 140px; border-radius: 5px">
      <div style="flex: 1">
        <div style="font-size: 18px">{{ item.playlist.name }}</div>
        <div style="margin-top: 5px">制作人：{{ item.playlist.userName }}</div>
        <div style="margin-top: 10px; font-size: 13px; color: #666666" class="line2">{{ item.playlist.description }}</div>
        <div style="margin-top: 15px">
          <el-button size="small" type="primary" @click="router.push('/front/playlistDetail?id=' + item.playlist.id)"><el-icon><View /></el-icon><span style="margin-left: 5px">查看</span></el-button>
        </div>
      </div>
    </div>
    <div v-else style="margin-top: 100px; text-align: center; font-size: 15px; color: #666666">暂无收藏歌单</div>
    <div v-if="data.total" style="margin-top: 20px">
      <el-pagination @current-change="loadPlaylistCollect" layout="total,prev, pager, next" :page-size="data.pageSize" v-model:current-page="data.pageNum" :total="data.total"/>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";

const data = reactive({
  user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
  playlistData: [],
  total: 0,
  pageNum: 1,
  pageSize: 8,
})

const loadPlaylistCollect = () => {
  request.get('/collect/selectPage', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      userId: data.user.id,
      type: 'PLAYLIST'
    }
  }).then(res => {
    if (res.code === '200') {
      data.playlistData = res.data?.list
      data.total = res.data?.total
    } else {
      ElMessage.error(res.msg)
    }
  })
}
loadPlaylistCollect()

</script>